<template>
    <div>
        <div class="main-container">
            <div class="ctn-menu-title">
                <h2>账户信息</h2>
            </div>
            <div class="new-abstract-userInfo-container">
                <div class="content" style="background: rebeccapurple">
                    <div class="content-area">
                        <div class="zhanghu-area" >
                          <div>
                            <span class="jiben">账户基本信息 </span>
                            <span class="shang">(上次登录时间：2024-01-22) </span>
                          </div>

                                <div class="heng"></div>
                                <div class="shengqing" @click="btnXiu">申请修改</div>
                                <div class="shengqing shengqing2" @click="btnXiu">修改历史</div>
                        </div>
                        <div class="zhanghuming-area">
                            <div class="zhanghu1"><span style="color:#999">账户名：</span><span>{{accountData.userName}}</span> </div>
                            <div><span style="color:#999">网站名：</span><span>{{accountData.websiteName}} </span> </div>
                        </div>
                        <div class="zhanghuming-area">
                            <div class="zhanghu1"><span style="color:#999">公司名：</span><span>{{accountData.companyName}} </span> </div>
                            <div style="margin-left: 12px;"><span style="color:#999">网址：</span><span>{{accountData.website}} </span> </div>
                        </div>
                        <div class="zhanghu-area">
                            <span class="jiben">行业信息 </span>
                            <div class="heng" style="width: 95.2%;"></div>

                    </div>
                    <div class="zhanghuming-area">
                        <div class="zhanghu1" style="position: relative;left: -58px;"><span style="color:#999">账号行业2019：</span><span>{{accountData.industryInfo}}    </span> </div>

                    </div>
                    <div class="zhanghu-area">
                        <span class="jiben">账户详细信息 </span>
                        <div class="heng" style="width: 92.5%;"></div>
                        <div class="shengqing" @click="btnXiu">修改</div>
                </div>
                <div class="zhanghuming-area">
                    <div class="zhanghu1"><span style="color:#999">所在省市：</span><span>{{accountData.whereCity}} </span> </div>
                    <div><span style="color:#999">联系人：</span><span>{{accountData.contacts}}   </span> </div>
                </div>
                <div class="zhanghuming-area">
                    <div class="zhanghu1"><span style="color:#999">通讯地址：</span><span>{{accountData.mailAddress}}   </span> </div>
                    <div style="margin-left: 12px;"><span style="color:#999">座机：</span><span>{{accountData.landline}}    </span> </div>
                </div>
                <div class="zhanghuming-area">
                    <div class="zhanghu1"><span style="color:#999">邮政编码：</span><span>{{accountData.postalCode}}     </span> </div>
                    <div style="margin-left: 12px;"><span style="color:#999">手机：</span><span>{{accountData.phone}}   </span> </div>
                </div>
                <div class="zhanghuming-area">
                    <div class="zhanghu1" style="position: relative;left: 18px;"><span style="color:#999">Email：</span><span>{{accountData.email}}    </span> </div>
                  <div style="margin-left: 12px;"><span style="color:#999">传真：</span><span>{{accountData.fax}}</span> </div>
                </div>
                    </div>
                    <div class="zhanghu-area">
                        <span class="jiben">客服联系信息 </span>
                        <div class="heng" style="width: 90%;"></div>

                </div>
                <div class="zhanghuming-area">
                    <div class="zhanghu1" style="position: relative;left: -28px;"><span style="color:#999">推广顾问：</span><span>容玉金  </span> </div>
                    <div style="margin-left: 12px;"><span style="color:#999">推广顾问联系电话：</span><span>4009200000-2</span> </div>
                </div>
                <div class="zhanghu-area">
                    <span class="jiben">发票邮寄地址 </span>
                    <div class="heng" style="width: 90.5%;"></div>
                    <div class="shengqing" @click="btnXiu">修改</div>
            </div>
            <div class="zhanghuming-area">
                <div class="zhanghu1" style="position: relative;left: 12px;"><span style="color:#999">联系人：</span><span>{{accountData.invoiceMailingContacts}}  </span> </div>
                <div><span style="color:#999">邮寄地址：</span><span>{{accountData.invoiceMailingAddress}}    </span> </div>
            </div>
            <div class="zhanghuming-area">
                <div class="zhanghu1"><span style="color:#999">联系电话：</span><span>{{accountData.invoiceMailingPhone}}    </span> </div>
                <div ><span style="color:#999">邮政编码：</span><span>{{accountData.invoiceMailingCode}}      </span> </div>
            </div>


            <div class="zhanghu-area">
                <span class="jiben">账户其他信息 </span>
                <div class="heng" style="width: 90.5%;"></div>
                <div class="shengqing" @click="btnXiu">修改</div>
        </div>
        <div class="zhanghuming-area">
            <div class="zhanghu1" style="position: relative;left: 12px;"><span style="color:#999">联系人2：</span><span>无 </span> </div>
            <div><span style="color:#999">座机：</span><span>无   </span> </div>
        </div>
        <div class="zhanghuming-area">
            <div class="zhanghu1" style="position: relative;left: 23px;"><span style="color:#999">Email：</span><span>无   </span> </div>
            <div ><span style="color:#999">手机：</span><span>无   </span> </div>
        </div>
        <div class="zhanghuming-area">
            <div class="zhanghu1" style="position: relative;left: 12px;"><span style="color:#999">联系人3：</span><span>无 </span> </div>
            <div><span style="color:#999">座机：</span><span>无   </span> </div>
        </div>
        <div class="zhanghuming-area">
            <div class="zhanghu1" style="position: relative;left: 23px;"><span style="color:#999">Email：</span><span>无  </span> </div>
            <div ><span style="color:#999">手机：</span><span>无    </span> </div>
        </div>




                </div>
            </div>
        </div>

    </div>
</template>
<script>
export default{
  props: ['accountData'] ,// 声明message为一个prop
    name:'zhanghuXi',
    data(){
        return{

        }
    },
    methods:{
        btnXiu(){
            this.$message('服务器繁忙,请稍后重试！');
        }
    }
}
</script>
<style scoped>
.zhanghu1{
    width: 545px;
    margin-left: 102px;
}
.zhanghuming-area{
    display: flex;
    font-size: 12px;
    color: #666;
    height: 36px;
}
.shengqing2{

    width: 48px;
    text-align: center;
    line-height: 16px;
    margin-left: 12px;
}
.shengqing{
    line-height: 16px;
    margin-left: 12px;
    font-size: 12px;
    color: #3998fc;
    cursor: pointer;
    display: inline-block;
}
.shengqing:hover{
    border-bottom: 1px solid;
}
.shang{
    font-size: 13px;
    padding-left: 14px;
}
.jiben{
    color: #333;
    font-weight: 600;
    font-size: 14px;
}
.heng{
  width: 98%;
  position: absolute;
  top: 11px;
  left: 0;
  z-index: 1;
  border-bottom: 1px solid #eee;

}
.zhanghu-area{
  width: 98%;
    height: 50px;
    padding-top: 16px;
  margin: 0 auto;
}
.content-area{
    width: 98%;
    line-height: 68px;
    padding-top: 40px;

}
.content{
    width: 100%;
    margin: 0 auto;
    line-height: 68px;
    background: white;
  padding: 30px;
    padding-bottom: 68px;
}
.new-abstract-userInfo-container{
    /* padding: 24px; */
    background: #fff;

    position: relative;
}
.main-container{
    position: relative;
    min-height: calc(100vh - 128px);
    box-sizing: border-box;
    padding: 24px 30px 0;
    padding-bottom: 30px;
}
.ctn-menu-title{
    background-color: #fff;
    border-radius: 5px;
    padding: 24px;
    margin-bottom: 24px;
}
.ctn-menu-title h2 {
    margin: 0;
    font-size: 20px;
    color: #000;
    font-weight: initial;
}
</style>